.dialog-header {
  padding: 10px 20px;
  height: 60px;
  display: inline-block;
  line-height: 36px;
  color: var(--dbtu-font-color);
  background-color: var(--dbtu-background-color);
  transition: all var(--dbtu-transition-duration);
  width: 200px;
  font-size: var(--el-font-size-large);
}

.setting-content {
  width: 100%;
  height: 480px;
  overflow: auto;
  display: flex;

  .nav-tab-box {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    background-color: var(--dbtu-background-color);
    transition: all var(--dbtu-transition-duration);

    .nav-tab {
      width: 200px;
      height: 100%;
      list-style: none;
      color: var(--dbtu-font-color);

      .nav-tab__item {
        width: 100%;
        height: 34px;
        padding: 0 20px;
        display: flex;
        align-items: center;
        border-radius: var(--dbtu-border-radius);
        margin-bottom: 5px;
        gap: var(--dbtu-icon-text-gap);
        cursor: pointer;

        &.is-active {
          background-color: var(--dbtu-theme-color);
          transition: all var(--dbtu-transition-duration);
          position: relative;
          color: var(--el-color-white);
        }

        &:not(.is-active):hover {
          background-color: var(--dbtu-hover-color);
        }
      }
    }

    .reset-setting {
      cursor: pointer;
      padding: 0 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--dbtu-font-color-minor);
      gap: var(--dbtu-icon-text-gap);

      &:hover {
        color: var(--dbtu-font-color);
      }
    }
  }

  .setting-page {
    flex: 1;
    margin-left: 10px;
    overflow: auto;
    padding: 20px;
  }
}
